<template>
    <div id="previewForm">
        <el-dialog
            title="图片预览"
            v-model="isLookDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="900px" 
            :before-close="handleClose"
            :destroy-on-close="true"

        >
            <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" style="text-align: center;min-height: 40vh">
                <img :src="url" style="max-width: 99%">
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { sysFileInfoPreview } from '/@/api/manage/manage.ts'
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'previewForm',
    components: {},
    props: {
        isLookDialog:{
            type: Boolean,
            default: false,
        },
        lookInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const url = ref()
        const loading = ref(false)

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })
        
        /*** ImgUrl 获取图片并转换成链接 */
        const ImgUrl = async (val:any) => {
            loading.value = true
            let param = {id: val.id}
            try {
                let res = await sysFileInfoPreview(param)
                if(res.status === 200){
                    downloadfile(res.data)
                }else{
                   loading.value = false 
                }
            } catch (err) { loading.value = false }
        }

        /*** downloadfile 图片类型转换 */
        const downloadfile = (val:any) => {
            console.log(val,'数据')
            let blob = new Blob([val]) 
            url.value = window.URL.createObjectURL(blob)
            loading.value = false
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            url.value = ''
            ctx.emit('cancelLookClick')
        }

        /*** 监听isLookDialog的变化 */
        watch(() => props.isLookDialog,(newVal) => {
            if(newVal){
                ImgUrl(JSON.parse(props.lookInfo))
            }
        })

        /*** isLookDialog 响应弹窗的关闭  */
        const isLookDialog = computed(() => {
            return props.isLookDialog
        })

        return {
            handleClose,
            ...toRefs(state),
            isLookDialog,
            url,
            loading,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>